<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="等待认证结果"></el-step>
      </el-steps>

      <div v-if="active === 0" class="user-borrower">
        <!-- 个人基本信息 -->
        <h6> 个人基本信息 </h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>

          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>

          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option v-for="item in educationList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option v-for="item in industryList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option v-for="item in incomeList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option v-for="item in returnSourceList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 联系人信息 -->
        <h6> 联系人信息 </h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>

          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input maxlength="11" v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>

          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option v-for="item in contactsRelationList" :key="item.value" :label="item.name"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>

        <!-- 身份认证信息 -->
        <h6> 身份认证信息 </h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload :on-success="onUploadSuccessIdCard1" :on-remove="onUploadRemove" :multiple="false"
                       :action="uploadUrl" :data="{ module: 'idCard1' }" :limit="1" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="身份证国徽面">
            <el-upload :on-success="onUploadSuccessIdCard2" :on-remove="onUploadRemove" :multiple="false"
                       :action="uploadUrl" :data="{ module: 'idCard2' }" :limit="1" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <!-- 其他信息 -->
        <h6> 其他信息 </h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload :on-success="onUploadSuccessHouse" :on-remove="onUploadRemove" :multiple="false"
                       :action="uploadUrl" :data="{ module: 'house' }" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="车辆信息">
            <el-upload :on-success="onUploadSuccessCar" :on-remove="onUploadRemove" :multiple="false"
                       :action="uploadUrl" :data="{ module: 'car' }" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button type="primary"  @click="save"> 提交</el-button>
          </el-form-item>
        </el-form>
      </div>


<!-- --------------------------------------------------------------------提交审核后------------------------------------------------------------------------------------------------ -->
      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert title="您的认证申请已成功提交，请耐心等待" type="warning" show-icon :closable="false">
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>

      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert v-if="borrowerStatus === 2" title="您的认证审批已通过" type="success" show-icon :closable="false"></el-alert>
          <el-alert v-if="borrowerStatus === -1" title="您的认证审批未通过" type="error" show-icon :closable="false">
          </el-alert>
        </div>
      </div>

    </div>

    <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
      <el-button style="margin-top:20px;" type="success">
        我要借款
      </el-button>
    </NuxtLink>
  </div>
</template>
<script>
// import borrower from "../../../srb-admin/src/api/core/borrower";

export default {
  name: "borrower",
  data() {
    let BASE_API = process.env.BASE_API;

    return {
      active: null, //步骤
      borrowerStatus: null,
      submitBtnDisabled: false,

      //借款人信息
      borrower: {
        borrowerAttachList: []
      },
      educationList: [],          //学历列表
      industryList: [],           //行业列表
      incomeList: [],             //月收入列表
      returnSourceList: [],       //还款来源列表
      contactsRelationList: [],   //联系人关系
      uploadUrl: BASE_API + "/api/oss/file/upload"    //文件上传地址
    };
  },

  methods: {
    // 提交按钮（保存）
    save() {
      // 判断年龄
      if (this.borrower.age < 18 || this.borrower.age > 65) {
        return this.$message.error("年龄要在18岁与65岁之间");
      }

      // debugger
      this.submitBtnDisabled = true;
      this.$axios.$post("/api/core/borrower/auth/save", this.borrower).then((response) => {
        this.active = 1;
      });
    },

    // 身份证人像面
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, "idCard1");
    },

    // 身份证国徽面
    onUploadSuccessIdCard2(response, file) {
      this.onUploadSuccess(response, file, "idCard2");
    },

    // 房产信息
    onUploadSuccessHouse(response, file) {
      this.onUploadSuccess(response, file, "house");
    },

    // 车辆信息
    onUploadSuccessCar(response, file) {
      this.onUploadSuccess(response, file, "car");
    },

    // 准备上传
    onUploadSuccess(response, file, type) {
      // debugger
      if (response.code !== 0) {
        this.$message.error(response.message);
        return;
      }
      // 填充上传文件列表
      this.borrower.borrowerAttachList.push({
        imageName: file.name,
        imageUrl: response.data.url,
        imageType: type
      });
    },

    // 用于文件与图片的上传功能
    onUploadRemove(file, fileList) {
      // console.log("fileList", fileList);
      //删除oss服务器上的内容
      this.$axios.$delete("/api/oss/file/remove?url=" + file.response.data.url).then((response) => {
        // debugger
        console.log("远程删除");
        this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.filter(
          function(item) {
            // console.log("item", item);
            return item.imageUrl !== file.response.data.url;
            // 43;
          });
      });
    },

    // 下拉列表、展示借款人信息
    initSelected() {
      //学历列表
      this.$axios.$get("/api/core/dict/findByDictCode/education").then((response) => {
        this.educationList = response.data.dictList;
      });

      //行业列表
      this.$axios.$get("/api/core/dict/findByDictCode/industry").then((response) => {
        this.industryList = response.data.dictList;
      });

      //收入列表
      this.$axios.$get("/api/core/dict/findByDictCode/income").then((response) => {
        this.incomeList = response.data.dictList;
      });

      //还款来源列表
      this.$axios.$get("/api/core/dict/findByDictCode/returnSource").then((response) => {
        this.returnSourceList = response.data.dictList;
      });

      //联系人关系列表
      this.$axios.$get("/api/core/dict/findByDictCode/relation").then((response) => {
        this.contactsRelationList = response.data.dictList;
      });

      //还款方式列表
      this.$axios.$get("/api/core/dict/findByDictCode/returnMethod").then((response) => {
        this.returnMethodList = response.data.dictList;
      });

      //资金用途列表
      this.$axios.$get("/api/core/dict/findByDictCode/moneyUse").then((response) => {
        this.moneyUseList = response.data.dictList;

      });
    },

    //获取借款人信息
    getUserInfo() {
      this.$axios.$get("/api/core/borrower/auth/getBorrowerStatus").then((response) => {
        this.borrowerStatus = response.data.borrowerStatus;
        if (this.borrowerStatus === 0) {
          //未认证
          this.active = 0;
          //获取下拉列表
          this.initSelected();
        } else if (this.borrowerStatus === 1) {
          //认证中
          this.active = 1;
        } else if (this.borrowerStatus === 2) {
          //认证成功
          this.active = 2;
        } else if (this.borrowerStatus === -1) {
          //认证失败
          this.active = 2;
        }
      });
    },

    // 获取借款额度信息
    getBorrowAmount() {
      this.$axios.$get("/api/core/borrowInfo/auth/getBorrowAmount").then((response) => {
        this.borrowAmount = response.data.borrowAmount;
      });
    }
  },

  watch: {
    "borrowInfo.amount"(value) {
      if (value > this.borrowAmount) {
        let _this = this;
        this.$alert("您的借款额度不足！", {
          type: "error",
          callback() {
            _this.borrowInfo.amount = _this.borrowAmount;
          }
        });
      }
    }
  }
  ,

// 生命周期，页面加载时，展示
  created() {
    // 下拉列表、展示借款人信息
    this.initSelected();
    // 获取借款人信息
    this.getUserInfo();
    // 获取借款额度
    this.getBorrowAmount();
  }
};

</script>
